<template>
	<view class="page-conent">
		<view style="height: var(--status-bar-height);"></view>
		<pageheader text="检查列表" />
		<topNav :activeIndex="activeIndex" :isLoading="isloading" :navtitle="navtitle" @topChange="topChange">
			<view class="index" style="text-align: center;font-size: 20px;line-height: 100px;" v-if="total == 0">检查已全部完成</view>
			<view v-else>
				<checkCard
					:key="index" 
					v-for="(item,index) in check"
					:week="item.week"
					:roomName="item.roomName"
					:responsibleNumber="item.responsibleNumber"
					:responsibleName="item.responsibleName"
					:className="item.className"
					:teacherName="item.teacherName"
					:teacherNumber="item.teacherNumber"
					:classTeacheres="item.classTeacheres"
					:buildings="item.buildings"
					:room="item.room"
					:classes="item.classes"
				>
					<view :style="{'color': item.isWrited ? '#4059FF' :'#FF4E5E' }" class="state">
						{{ item.isWrited ? '已检查' : '未检查'}}
					</view>
					<btn :type="item.isWrited ? 'default' : 'active'" @click="to(item)">{{ item.isWrited ? '修改' : '填写'}}</btn>
				</checkCard> 
			</view>
		</topNav>
		<view v-if="reachBottom" class="loading">加载中...</view>
	</view>
</template>

<script>
	const navtitle = [
		{
			activeColor: '#FF4E5E',
			activeFont: '#FFFFFF',
			title: '7S检查'
		},
		{
			activeColor: '#4059FF',
			activeFont: '#FFFFFF',
			title: '教学检查'
		},
		{
			activeColor: '#FF6702',
			activeFont: '#FFFFFF',
			title: '自习检查'
		},
		{
			activeColor: '#3AC3AF',
			activeFont: '#FFFFFF',
			title: '寝室检查'
		}
	]
	import btn from '../../components/button.vue'
	import { mutations,mapState,mapActions } from 'vuex'
	import pageheader from '../../components/pageHeader.vue'
	import topNav from '../../components/topNav.vue'
	import checkCard from '../../components/chehkCard.vue'
	export default {
		onLoad: function (option) {
			this.activeIndex = option.checkType / 1 ? option.checkType / 1 : 0;
		},
		async onReachBottom(){
			this.reachBottom = true;
			await this.$store.dispatch("getData",this.activeIndex)
			this.reachBottom = false;
			this.$forceUpdate()
		},
		data() {
			return {
				navtitle,
				activeIndex:0,
				total: 0,
				isloading: true,
				reachBottom: false,
			}
		},
		computed: {
			...mapState({
				check: state => state.check.data,
			  })
		},
		methods: {
			async topChange(type){
				this.isloading = true;
				this.activeIndex = type;
				const index = await this.$store.dispatch('initData',type);
				this.total = index;
				this.isloading = false;
			},
			to(item){
					uni.removeStorageSync('checkinfo')
					// console.log(item)
					uni.setStorageSync('checkinfo',item)
					uni.navigateTo({
						url:'/pages/from/from?checkType=' + this.activeIndex  
					})
			}
		},
		components:{
			pageheader,
			topNav,
			btn,
			checkCard
		}
	}
</script>

<style scoped>
.page-conent{
	padding: 0px 30px;
}
.loading{
	text-align: center;
	line-height: 50px;
	height: 50px;
}
.state{
			width:39px;
			height:13px;
			padding-left: 10px;
			font-size:13px;
			font-family:PingFang SC;
			font-weight:bold;
			color:rgba(255,78,94,1);
		}
</style>
